<template>
	<div class="left-menu" @mouseleave="noShowMenu">
		<ul>
			<li v-for="(item,index) in showMainData" 
			:key="index"
			@mouseenter="showMenu(index)">
				<span v-for="(d,i) in item.data" :key="i">
					<a :href="'/goods/'+d.name+'/1/'">{{ d['name'] }}</a>
					<span v-if="item.data.length-i-1">/</span>
				</span>
			</li>
		</ul>
		<div class="second-menu" v-show="isShowMenu">
			<SecondMenu :showSecondMenuIndex="showSecondMenuIndex"></SecondMenu>
		</div>
	</div>
</template>

<script setup>
	import {getMainmenu} from "@/network/home.js"
	import { computed, onMounted, ref } from "vue"
	import SecondMenu from "./SecondMenu.vue"
	
	let leftMenuData = ref([])
	onMounted(()=>{
		getMainmenu().then(res=>{
			// console.log(res.data);
			initMenuData(res.data);
		});
	});
	const initMenuData = (menuData) => {
		for(let i in menuData){
			// leftMenuData.value.push(menuData);
			leftMenuData.value.push(menuData[i]);
		}
	};
	 
	const showMainData = computed(() => {
		let resultList = [];
		let result = {"index":"","data":[]};
		for(let i in leftMenuData.value){
			let id = leftMenuData.value[i].main_menu_id;
			let data = {"name":leftMenuData.value[i].main_menu_name};
			if(result["index"] != null && id == result["index"]){
				result["data"].push(data);
			}else{
				result = {"index":"","data":[]};
				result["index"] = id;
				result["data"].push(data);
				resultList.push(result)
			}
		}
		return resultList;
	});
	
	let isShowMenu = ref(false);
	let showSecondMenuIndex = ref();
	// 显示二级菜单
	const showMenu = (index) => {
		isShowMenu.value = true;
		showSecondMenuIndex.value = index;
	};
	// 隐藏二级菜单
	const noShowMenu = () => {
		isShowMenu.value = false;
	};
</script>

<style lang="less" scoped>
	@red: #e2231a;
	.left-menu{
		position: relative;
		width: 190px;
		height: 470px;
		background-color: white;
		ul{
			padding-top: 12px;
			li{
				padding-left: 15px;
				// padding-top: 3px;
				// padding-bottom: 3px;
				line-height: 25px;
				height: 25px;
				a{
					font-size: 14px;
					color: #333;
					&:hover{
						color: @red;
						cursor: pointer;
					}
				}
				&:hover{
					background-color: #d9d9d9;
				}
			}
		}
		.second-menu{
			position: absolute;  // 绝对定位，脱离正常的文档流，并根据指定的位置放置在页面上
			left: 190px;
			top: 0;
			z-index: 999;
		}
	}
</style>